<template>
	<div>
		<el-dialog v-model="data.dialogVisible" append-to-body :close-on-click-modal="false" :show-close="false" :align-center="true" modal-class="AddBigModal" @close="close">
			<template #title>
				<div class="resetDiaLogTitle">
					<div>
						{{ title }}
					</div>
					<div>
						<el-icon style="font-size: 22px" @click="() => close()">
							<Close />
						</el-icon>
					</div>
				</div>
			</template>

			<div>
				<div class="collapseLine">
					<div class="leftIcon">
						<el-icon
							@click="
								() => {
									collapseObj.hideBasic = !collapseObj.hideBasic ? true : false;
								}
							"
						>
							<ArrowDown v-if="!collapseObj.hideBasic" />
							<ArrowRight v-else />
						</el-icon>
					</div>
					<div>基本信息</div>
				</div>
				<div class="formParent" :style="collapseObj.hideBasic ? { height: '0px', padding: 0, marginBottom: '10px' } : {}">
					<form-show v-model="queryForm" :formConfig="formConfig" />
				</div>
			</div>
			<div>
				<div class="collapseLine">
					<div class="leftIcon">
						<el-icon
							@click="
								() => {
									collapseObj.hideDetail = !collapseObj.hideDetail ? true : false;
								}
							"
						>
							<ArrowDown v-if="!collapseObj.hideDetail" />
							<ArrowRight v-else />
						</el-icon>
					</div>
					<div>明细信息</div>
					<div>
						<el-button-group>
							<!-- <el-button @click="addTableOne">
                新增
              </el-button> -->
							<!-- <el-button @click="copyTable">
                复制
              </el-button> -->
							<!-- <el-button @click="deleteTable">
                删除
              </el-button> -->
						</el-button-group>
					</div>
				</div>
				<div ref="suixinx" :style="{ height: collapseObj.hideDetail ? '0px' : '', overflow: 'hidden' }">
					<div :style="{ height: data.height + 'px' }" class="showTable">
						<vxe-grid ref="xGrid" v-bind="gridOptions" keep-source :data="data.tableData" @checkbox-change="checkboxChange" @checkbox-all="checkboxChange"> </vxe-grid>
					</div>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="() => close()">取消</el-button>
					<el-button @click="() => submit()"> 确认 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { defineProps, ref, reactive, defineEmits, computed, onMounted } from 'vue'; //获取父组件传的props和向父组件发送方法
import FormShow from '/@/components/Form/index.vue';
import XEUtils from 'xe-utils';
import { checkFormData } from '/@/libs/common.js';
import { formsUp, tableDown } from './form';
import { ElMessage } from 'element-plus';

import { shipmentAdd, shipmentEdit,shipmentTransportMode, purchaseOrderList, getDtlListByOrderId, shipmentDetail } from '/@/api/zhu.js';

// 通用表单的设置   取消确认按钮  title标题  内容区间 校验

// 获取父组件的传参
const props = defineProps({
	editData: {
		type: Object,
		default: () => {
			return {};
		},
	},
	title: {
		type: String,
		default: '新增',
	},
});
const emits = defineEmits(['updateMethod']);

// 定义属性使用区域
const suixinx = ref(null);
const xGrid = ref(null);

let data = reactive({ dialogVisible: true, tableData: [],outList:[], listPur: [], openLook: false, rowLook: {} });
let queryForm = reactive({ billNo: '' });
const collapseObj = reactive({});

// data.tableData.push({ processMode: '', dateZ: '2020-09-01', materZ: 'suu' })
const beforeEditMethod = (e) => {
	// 对当前单元格做判断 是否可以编辑
	let { column, row, cell } = e;

	console.log(e);
	if (e.rowIndex == '3') {
		return false;
	}
	// return false
	return true;
};

const updateTableZ = (e) => {
	getDtlListByOrderId(e).then((res) => {
    queryForm.purchaseOrderId=e;
		data.tableData = res.data.data;
	});
};
// 计算属性使用区域
const formConfig = computed(() => {
	return {
		inline: true,
		size: 'mini',
		labelWidth: '100px',
		formItemList: formsUp(data, updateTableZ,queryForm),
	};
});
let gridOptions = reactive({
	border: true,
	round: true,
	height: '100%',
	showOverflow: 'tooltip',
	showHeaderOverflow: 'tooltip',
	showFooterOverflow: 'tooltip',
	editConfig: {
		trigger: 'click',
		mode: 'cell',
		showIcon: false,
		beforeEditMethod: beforeEditMethod,
	},
	columns: tableDown(data),
	editRules: {
		// materialNo: [{ required: true, message: '请选择物料', trigger: 'blur' }],
		// processMode: [{ required: true, message: '请选择加工工艺', trigger: 'blur' }],
	},
	validConfig: {
		autoPos: false,
		showMessage: true,
	},
});

// 生命周期使用区域
onMounted(() => {
	setTimeout(() => {
		let { top = 0 } = suixinx.value.getBoundingClientRect();
		data.height = window.innerHeight - top - 120;
	
	}, 400);

	if (props.editData.id) {
		shipmentDetail(props.editData.id).then((res) => {
			let { dtlList, ...other } = res.data.data;
			for (let i in other) {
				queryForm[i] = other[i];
			}
			data.tableData = dtlList;
		});
	}

	// 获取采购订单列表
	purchaseOrderList({ pageIndex: 1, pageSize: 10000 }).then((res) => {
		data.listPur = res.data.data;
	});
  shipmentTransportMode({}).then(res=>{
    data.outList=res.data.data
  })
});

// 定义的方法使用区域
// 关闭按钮
const close = (boo = false) => {
	data.dialogVisible = false;
	setTimeout(() => {
		emits('updateMethod', queryForm, boo);
	}, 300);
};

// 提交按钮
const submit = async () => {
	let formItemList = formConfig.value.formItemList;
	let bool = checkFormData(formItemList, queryForm);
	let checkTableOne = false;

	// 插入数据  删除数据  变更数据
	let { insertRecords = [], removeRecords = [], updateRecords = [] } = xGrid.value.getRecordset();
	let { tableData } = xGrid.value.getTableData();

	if (!bool) {
		return;
	}
	await xGrid.value
		.validate(tableData)
		.catch((errMap) => errMap)
		.then((errMap) => {
			if (errMap) {
				const { rule, rowIndex } = errMap[Object.keys(errMap)[0]][0];
				const { $options } = rule;
				ElMessage.error('第' + (rowIndex + 1) + '行数据有误：' + $options.message);
				checkTableOne = false;
			} else {
				checkTableOne = true;
			}
		});
	if (!checkTableOne) {
		return;
	}

	let params = {
		...queryForm,
		dtlList: data.tableData,
	};

	let obj = {
		1: shipmentAdd,
		2: shipmentEdit,
	};
	obj[props.editData.id ? '2' : '1'](params).then((res) => {
		if (res.data.success) {
			close(true);
		}
		console.log(res);
		console.log(19);
	});
};

// 新增明细行
const addTableOne = () => {
	let obj = { processMode: '', dateZ: '2020-09-01', materZ: 'suu' }; //是否需要默认赋值
	xGrid.value.insertAt(obj, -1);
};
// 明细行选中
const checkboxChange = (value) => {
	data.selectionData = value.records;
};
// 复制明细行
const copyTable = () => {
	if (!data.selectionData || !data.selectionData.length) {
		ElMessage.error('请选择数据！');
	}
	xGrid.value.insertAt(
		data.selectionData.map((item) => {
			let { _X_ROW_KEY, ...other } = item;
			return other;
		}),
		-1
	);
};
// 删除明细行
const deleteTable = () => {
	xGrid.value.removeCheckboxRow();
	data.selectionData = [];
};

// lookUp
const sendSure = (e, boo = false) => {
	data.openLook = false;
	if (boo) {
		for (let i in e) {
			data.rowLook[i] = e[i];
		}
	}
};
</script>

<style scoped lang="less" src="./edit.less"></style>
